<template>
	<view class="pay-page">
		<uni-popup ref="payResultPopup" type="center" :mask-closable="false">
			<view class="pay-result-popup">
				<!-- 关闭按钮 -->
				<view class="close-btn" @click="closePopup">×</view>

				<!-- 支付结果内容 -->
				<!-- <view class="popup-content">
					<image class="success-icon" src="/static/success-icon.png" mode="aspectFill"></image>
					<text class="title">订单支付成功</text>
					<text class="amount">支付金额：¥100.25</text>
					<text class="tips">3秒后返回我的订单页面，请稍后...</text>

					<view class="btn-group">
						<button class="operate-btn" @click="goHome">进入首页</button>
						<button class="operate-btn" @click="contactService">联系客服</button>
					</view>
				</view> -->
				<view class="popup-content">
					<!-- <image class="success-icon" src="/static/success-icon.png" mode="aspectFill"></image> -->
					<text class="title">请联系客服人员</text>
					<text class="tips">银行转账后请致电客服人员核实，否则可能无法发货。<label style="color:#ff4d4f;">0530-2216166</label></text>

					<view class="btn-group">
						<button class="operate-btn" @click="goHome">进入首页</button>
						<button class="operate-btn" @click="contactService">已致电客服</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "pay-result-popup",
		data() {
			return {
				timer: null, // 定时器
				count: 3, //计时
			}
		},
		methods: {
			// 打开支付结果弹窗
			openPayResultPopup() {
				this.$refs.payResultPopup.open();
				// 3秒后自动跳转订单页
				// this.timer = setInterval(() => {
				// 	this.count--;
				// 	if (this.count <= 0) {
				// 		this.closePopup();
				// 		// 跳转到订单页（替换为你的实际订单页路径）
				// 		uni.navigateTo({
				// 			url: '/pages/order/order'
				// 		});
				// 	}

				// }, 1000);
			},
			// 关闭弹窗
			closePopup() {
				this.$refs.payResultPopup.close();
				// 清除定时器
				clearTimeout(this.timer);
			},
			// 进入首页
			goHome() {
				this.closePopup();
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			// 联系客服
			contactService() {
				this.closePopup();
			}
		}
	}
</script>

<style scoped>
	.pay-page {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 支付按钮样式 */
	.pay-btn {
		padding: 20rpx 40rpx;
		font-size: 32rpx;
		background-color: #ff4d4f;
		color: #fff;
		border-radius: 10rpx;
	}

	/* 弹窗容器 */
	.pay-result-popup {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
	}

	/* 关闭按钮 */
	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #999;
		cursor: pointer;
	}

	/* 弹窗内容区域 */
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 成功图标 */
	.success-icon {
		width: 100rpx;
		height: auto;
		margin-bottom: 20rpx;
	}

	/* 标题 */
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	/* 金额 */
	.amount {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	/* 提示文案 */
	.tips {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	/* 按钮组 */
	.btn-group {
		display: flex;
		gap: 20rpx;
	}

	/* 操作按钮 */
	.operate-btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background-color: #ff4d4f;
		border-radius: 8rpx;
		border: none;
	}
</style>